<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <span>订单管理</span>
            </div>
        </template>
        <el-row :gutter="14">
            <el-col :span="5">
                <el-input placeholder="请输入用户名" v-model="searchContent"></el-input>
            </el-col>
            <el-select v-model="searchSelect" placeholder="请选择订单状态">
                <el-option value="0" label="----------"></el-option>
                <el-option value="1" label="未支付"></el-option>
                <el-option value="2" label="已支付，待发货"></el-option>
                <el-option value="3" label="已发货，待收货"></el-option>
                <el-option value="4" label="已收货，待评价"></el-option>
                <el-option value="5" label="完成订单"></el-option>
            </el-select>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="orderSearch">搜索</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column width="60" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" width="200">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="总金额" width="80">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.money }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单状态" width="90">
                <template #default="scope">
                    <span style="margin-left:10px" v-if="scope.row.flag == 1">未支付</span>
                    <span style="margin-left:10px" v-if="scope.row.flag == 2">已支付，待发货</span>
                    <span style="margin-left:10px" v-if="scope.row.flag == 3">已发货，待收货</span>
                    <span style="margin-left:10px" v-if="scope.row.flag == 4">已收货，未评价</span>
                    <span style="margin-left:10px" v-if="scope.row.flag == 5">订单完成</span>
                </template>
            </el-table-column>
            <el-table-column label="订单时间" width="170">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.createtime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户姓名" width="160">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="orderDelete(scope.row.id)">删除</el-button>
                    <el-button
                        size="mini"
                        type="success"
                        @click="deliver(scope.row.id)"
                        v-if="scope.row.flag == 2"
                    >发货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="changePage"
        ></el-pagination>
    </el-card>
    <!-- <addOrder :centerDialogVisible="centerDialogVisible" @onCloseDialog="closeDialogVisible"></addOrder> -->
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import axios from 'axios'
// import addOrder from './addOrder.vue'
// import updateorder from './updateorder.vue'
import { ElMessageBox, ElNotification } from "element-plus";

// 读取页面数据
function loadData(state) {
    const params = {
        pageCurrent: state.currentPage,
        pageSize: state.pageSize,
        username: state.searchContent,
        status: state.searchSelect,

    }
    axios({
        url: '/getAllOrderOffset',
        method: 'get',
        params: params,
    }).then(res => {
        console.log(res.data.data)
        state.tableData = res.data.data.list;
        state.total = res.data.data.total // 总的记录数
    });
}


// 删除商品
function useOrderDelete(state) {
    const orderDelete = (id) => {
        // console.log('index=',index)
        console.log('id=', id)
        ElMessageBox.confirm("是否确认删除该类型？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            callback: (action) => {
                if (action == 'confirm') {
                    axios({
                        url: '/deleteOrder',
                        method: 'get',
                        params: {
                            count: id
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            ElNotification({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                            loadData(state)
                        } else {
                            ElNotification({
                                title: "失败",
                                message: "删除失败",
                                type: "error",
                                duration: 2000,
                            });
                        }
                    });
                }
            },
        });
    }
    return {
        orderDelete
    }
}

// 搜索订单
function useOrderSearch(state) {
    const orderSearch = () => {
        state.currentPage = 1;
        const params = {
            pageCurrent: state.currentPage,
            pageSize: state.pageSize,
            username: state.searchContent,
            status: state.searchSelect,
        }
        axios({
            url: '/selectOrderByNameAndFlagOffset',
            method: 'get',
            params: params
        }).then(res => {
            if (res.data.code == 200) {
                state.tableData = res.data.data.list
                state.total = res.data.data.total
            } else {
                state.tableData = [];
                ElNotification({
                    title: "失败",
                    message: "查无此信息",
                    type: "error",
                    duration: 2000,
                });
            }


        });
    };
    return {
        orderSearch,
    }
}

function useDeliver(state) {
    const deliver = (id) => {
        axios({
            url: '/sendOrder',
            method: 'get',
            params: {
                oid: id
            }
        }).then(res => {
            console.log(res)
            if (res.data.code == 200) {
                ElNotification({
                    title: "成功",
                    message: "发货成功",
                    type: "success",
                    duration: 2000,
                });
                loadData(state)
            } else {
                ElNotification({
                    title: "失败",
                    message: "发货失败",
                    type: "error",
                    duration: 2000,
                });
            }
        });
    }
    return {
        deliver
    }
}

export default {
    components: {
        // addOrder, // 注册组件
    },
    setup() {
        const state = reactive({
            tableData: [],
            centerDialogVisible: false,
            updateDialogVisible: false, // 控制修改窗口显示与隐藏
            total: 0,
            currentPage: 1,     // 当前页码
            pageSize: 5,
            searchContent: "",  // 搜索条件类型名称
            searchSelect: [],
            gId: 0, //要修改的商品id
        });
        const imagesURL = import.meta.env.VITE_APP_URL + "/images/";

        onMounted(() => {
            loadData(state);
        });
        // 分页-页面切换的时候执行该方法
        const changePage = (val) => {
            state.currentPage = val;
            loadData(state);
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
        };

        return {
            ...toRefs(state), //...解构结构后不是响应式对象。toRefs数据转换成响应式对象
            imagesURL,
            ...useOrderSearch(state),
            ...useOrderDelete(state),
            changePage,
            ...useDeliver(state),

        };
    },
    methods: {
        // 序号-自动递增
        indexMethod(index) {
            return index = index + 1;
        }
    },
};
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>